<template>
   <el-tooltip content="邀请前，请确保对方已登录过此网站！" placement="top" :enterable="false" :open-delay="1000">
      <el-button type="primary" @click="invite()">邀请家庭成员</el-button>
   </el-tooltip>
   <!-- 搜索相关 start -->
   <el-form :model="queryParams" ref="refQueryForm" size="default" :inline="true" label-width="58px"
      style="margin-top: 10px;">
      <el-form-item label="姓名" prop="name">
         <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter.native="handleGetList" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
         <el-input v-model="queryParams.phone" placeholder="请输入手机号" clearable @keyup.enter.native="handleGetList" />
      </el-form-item>
      <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="default" @click="handleGetList">搜索</el-button>
         <el-button type="primary" icon="el-icon-refresh" size="default" @click="resetForm(refQueryForm)">重置</el-button>
      </el-form-item>
   </el-form>
   <!-- 表格相关 start -->
   <el-table :data="filterTableData" style="height: 550px;">
      <template #empty>
         <div>当前尚未加入家庭组</div>
         <em class="inviteText">加入家庭组，家庭成员间可以共享家庭相册！</em>
      </template>
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" width="55" :index="indexMethod" />
      <el-table-column label="姓名" prop="name" width="120" show-overflow-tooltip />
      <el-table-column label="手机号" prop="phone" width="120" />
      <el-table-column label="微信昵称" prop="wxNickName" width="120" />
      <el-table-column label="微信头像" prop="wxAvatar" width="100">
         <template #default="scope">
            <el-image :src="scope.row.wxAvatar" lazy>
               <!-- 自定义加载时的显示内容 -->
               <template #loading>
                  <div class="custom-loading">
                     <div class="spinner"></div>
                     <p>加载中...</p>
                  </div>
               </template>
               <!-- 自定义加载失败时的显示内容 -->
               <template #error>
                  <!-- <el-icon width="100px" height="100px"><Avatar /></el-icon> -->
                  <div class="custom-error">
                     <p>图片加载失败</p>
                  </div>
               </template>
               <!-- 自定义图片源为空时的显示内容 -->
               <template #empty>
                  <div class="custom-empty">
                     <p>无图片</p>
                  </div>
               </template>
            </el-image>
         </template>
      </el-table-column>
      <el-table-column width="140">
         <template #header>
            <el-input v-model="search" size="small" placeholder="Type to search" />
         </template>
      </el-table-column>
   </el-table>
   <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
      :page-sizes="[10, 20, 50, 100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
      layout="total, sizes, prev, pager, next, jumper" :total=pageData.totalNum @size-change="handleSizeChange"
      @current-change="handleCurrentChange" style="margin-top: 20px;" />
   <!-- 表格相关 end -->

   <!-- 邀请家庭成员对话框 start-->
   <el-dialog :title="title" width="450px" append-to-body draggable v-model="inviteOuterVisible">
      <el-row :gutter="15">
         <el-form :model="inviteFormData" :rules="inviteRules" size="default" label-width="90px" ref="inviteFormRef"
            style="max-width: 600px">
            <el-col :span="24">
               <el-form-item label="微信昵称" prop="wxNickName">
                  <el-input v-model="inviteFormData.wxNickName" placeholder="请输入对方的微信昵称" clearable
                     :style="{ width: '100%' }">
                  </el-input>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item size="large">
                  <el-button type="primary" @click="submitInviteForm(inviteFormRef)">保存</el-button>
                  <el-button @click="inviteOuterVisible = false">取消</el-button>
                  <el-button @click="resetForm(inviteFormRef)">重置</el-button>
               </el-form-item>
            </el-col>
         </el-form>
      </el-row>
   </el-dialog>
   <!-- 邀请家庭成员对话框 end-->
</template>
<script setup lang='ts'>
import { ref, reactive, computed, onMounted } from 'vue'
import { showErrorMsg, showSuccessMsg, indexMethod, resetForm } from '@/api/common';
import type { ApiResponse, PageResponse, PageData } from '@/api/common';
import type { FormInstance, FormRules } from 'element-plus';
import { inviteFamilyGroup, familyGroupPage } from '@/api/albumCollection/albumCollection';
import type { InviteRequest } from '@/api/albumCollection/albumCollection';
import type { User, QueryParams } from '@/api/user/user';
let pageData = reactive<PageData<User>>({
   totalNum: 0,
   tableData: [],
})
let queryParams = reactive<QueryParams>({
   pageNum: 1,
   pageSize: 10,
   name: '',
   phone: '',
})
let inviteFormData = reactive<InviteRequest>({
   wxNickName: '',
})
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const search = ref('')
const title = ref('邀请家庭成员')
const inviteOuterVisible = ref(false)
const refQueryForm = ref<FormInstance>();
const inviteFormRef = ref<FormInstance>();
const invite = () => {
   inviteOuterVisible.value = true
}
const handleGetList = () => {
   familyGroupPage(queryParams).then((res: ApiResponse<PageResponse<User>>) => {
      if (res.status != 200) {
         showErrorMsg(res.msg);
      } else {
         let totalTemp = parseInt(res.data.total);
         pageData.totalNum = totalTemp;
         pageData.tableData = res.data.records;
      }
   });
}
const submitInviteForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid, fields) => {
      if (valid) {
         inviteFamilyGroup(inviteFormData).then((res: ApiResponse<string>) => {
            if (res.status != 200) {
               showErrorMsg(res.msg);
            } else {
               showSuccessMsg("邀请请求已发出，等待对方同意！");
            }
         })
      } else {
         console.log('error submit!', fields)
      }
   })
}
const filterTableData = computed(() =>
   pageData.tableData.filter(
      (data) =>
         !search.value ||
         data.name.toLowerCase().includes(search.value.toLowerCase()) ||
         data.phone.toLowerCase().includes(search.value.toLowerCase())
   )
)
const handleSizeChange = (newSize: number) => {
   queryParams.pageSize = newSize;
   handleGetList();
}
const handleCurrentChange = (newPage: number) => {
   queryParams.pageNum = newPage;
   handleGetList();
}
let inviteRules = ref<FormRules<InviteRequest>>({
   wxNickName: [{
      required: true,
      message: '请输入对方的微信昵称',
      trigger: ['change', 'blur']
   }],
})
onMounted(() => {
   handleGetList();
})
</script>
<style scoped>
.inviteText {
   margin-top: -30px;
   font-size: 18px;
   color: rgb(106, 176, 98)
}
</style>